<template>
	<div class="change-container">
		<!--修改绑定邮箱内容-->
		<div class="change-account" v-if="!isChangeEmailSuccess">
			<div class="change-account-title" v-if='email'>{{$t('message.changeEmail')}}</div>
      <div class="change-account-title" v-else>{{$t('message.bandEmail')}}</div>
			<div class="" v-if="step === 1">
				<div class="change-account-label">
					{{$t('message.checkBandPhone')}}：<span>{{ phone }}</span>
				</div>
				<div class="change-account-label change-account-label-middle">
					<label for="verificationCode">{{$t('message.code')}}：</label>
				</div>
				<div class="change-account-input-btn">
					<div class="change-account-verification-input">
						<input type="text" id="verificationCode" ref="verificationCode" v-model="verificationCode" :placeholder="this.$t('message.sendCodeHolder')" autocomplete="off" />
					</div>
					<div class="change-account-btn">
						<button type="button" @click="getVerificationCode" :disabled="isBtnVeriDisabled">{{ btnVeriText }}</button>
					</div>
				</div>
			</div>
			<div v-else-if="step === 2">
				<div class="change-account-label">
					<label for="newEmail">{{$t('message.inputBandEmail')}}：</label>
				</div>
				<div class="change-account-input">
					<input type="text" id="newEmail" ref="newEmail" v-model="newEmail" :placeholder="this.$t('message.emailHolder')" />
				</div>
			</div>
			<div class="" v-else-if="step === 3">
				<div class="change-account-label">
					{{$t('message.emailHasSend')}}：<span>{{ newEmail }}</span>
				</div>
				<div class="change-account-tip">
					{{$t('message.emailTips')}}
				</div>
			</div>
			<div class="change-account-error" v-if="errorText !== ''">
				<div class="change-account-error-text">
					{{ errorText }}
				</div>
			</div>
      <div class="change-account-error" v-if="verificationCodeTxt !== ''">
        <div class="change-account-error-text">
          {{ verificationCodeTxt }}
        </div>
      </div>
      <div class="change-account-error" v-if="emailText !== ''">
        <div class="change-account-error-text">
          {{ emailText }}
        </div>
      </div>
			<div class="change-account-btn-group">
				<button type="button" class="btn-item btn-confirm" @click="nextStep" v-if="step === 1 || step === 2">{{$t('message.next')}}</button>
				<!--<button type="button" class="btn-item btn-confirm btn-send" @click="sendEmail" :disabled="isBtnEmailDisabled" v-else>{{ btnEmailText }}</button>-->
				<button type="button" class="btn-item btn-cancle" @click="closeDialog" v-if="step === 1">{{$t('message.cancel')}}</button>
				<button type="button" class="btn-item btn-cancle" @click="prevStep" v-else>{{$t('message.prev')}}</button>
			</div>
		</div>
		<!--修改绑定邮箱成功-->
		<div class="change-success" v-else>
			<div class="change-success-icon"></div>
			<div class="change-success-title">
				{{$t('message.bandEmailSuccess')}}
			</div>
			<div class="change-success-tip">
				{{ delayTime }}{{$t('message.autoClose')}}
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'PersonalAccountChangeEmail',
  props: {
    phone: {
      type: String
    },
    email: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isChangeEmailSuccess: false,
      step: 1,
      verificationCode: '',
      newEmail: '',
      errorStatus: 0,
      isBtnVeriDisabled: false,
      btnVeriTime: 60,
      btnVeriStatus: 0,
      isBtnEmailDisabled: false,
      btnEmailTime: 60,
      btnEmailStatus: 0,
      delayTime: 3,
      verificationCodeStatus: 0,
      emailStatus: 0,
      saveBtnStatus: 0
    }
  },
  watch: {
    newEmail (val) {
      clearTimeout(this.emailTimer)
      this.emailTimer = setTimeout(() => {
        if (/^\s*$/g.test(val)) {
          this.emailStatus = 4
        } else if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val)) {
          this.emailStatus = 3
        } else {
          this.$ajax.duplicateChecking({
            type: 'email',
            text: val
          }).post.then(res => {
            if (res.code === 200) {
              this.emailStatus = 1
            } else if (res.code === 202) {
              this.emailStatus = 2
            } else if (res.code === 303) {
              this.emailStatus = 3
            }
          })
        }
      }, 800)
    },
    verificationCode (val) {
      this.errorStatus = 0
      clearTimeout(this.verificationCodeTimer)
      this.verificationCodeTimer = setTimeout(() => {
        if (/^\s*$/g.test(val)) {
          this.verificationCodeStatus = 1
        } else if (val.length !== 6) {
          this.verificationCodeStatus = 2
        } else {
          this.verificationCodeStatus = 3
        }
      }, 800)
    }
  },
  computed: {
    emailText () {
      if (this.emailStatus === 0) {
        return ''
      } else if (this.emailStatus === 1) {
        return ''
      } else if (this.emailStatus === 2) {
//        return '该邮箱已经注册'
        return this.$t('message.registerError7')
      } else if (this.emailStatus === 3) {
//        return '该邮箱号码格式错误'
        return this.$t('message.registerError6')
      } else if (this.emailStatus === 4) {
//        return '输入空'
        return this.$t('message.emailNotBlank')
      } else if (this.emailStatus === 5) {
//        修改失败
        return this.$t('message.changeFail')
      }
    },
    btnVeriText () {
      if (this.btnVeriStatus === 0) {
        this.isBtnVeriDisabled = false
        return this.$tc('message.codeText', 1)
      } else if (this.btnVeriStatus === 1) {
        this.isBtnVeriDisabled = true
        return this.$t('message.sending')
      } else if (this.btnVeriStatus === 2) {
        this.isBtnVeriDisabled = true
        return this.$tc('message.codeText', 2) + this.btnVeriTime + 's)'
      }
    },
    btnEmailText () {
      if (this.btnEmailStatus === 0) {
        this.isBtnEmailDisabled = false
        return this.$t('message.clickSend')
      } else if (this.btnEmailStatus === 1) {
        this.isBtnEmailDisabled = true
        return this.$t('message.sending')
      } else if (this.btnEmailStatus === 2) {
        this.isBtnEmailDisabled = true
        return this.$tc('message.codeText', 2) + this.btnEmailTime + 's)'
      }
    },
    errorText () {
      if (this.errorStatus === 0) {
        return ''
      } else if (this.errorStatus === 1) {
        return ''
      } else if (this.errorStatus === 2) {
        return this.$t('message.messageNotOpen')
      } else if (this.errorStatus === 3) {
        return this.$t('message.phoneErr')
      } else if (this.errorStatus === 4) {
        return this.$t('message.lockOrDelete')
      } else if (this.errorStatus === 5) {
        return this.$t('message.messageSendSoMuch')
      } else if (this.errorStatus === 6) {
        return this.$t('message.codeFomatError')
      } else if (this.errorStatus === 7) {
        return ''
      } else if (this.errorStatus === 8) {
        return this.$t('message.codeError')
      } else if (this.errorStatus === 9) {
        return this.$t('message.messageSendFail')
      } else if (this.errorStatus === 10) {
        return this.$t('message.emailNotBlank')
      } else if (this.errorStatus === 11) {
        return this.$t('message.registerError6')
      } else if (this.errorStatus === 12) {
        return this.$t('message.codeNoEmpty')
      }
    },
    verificationCodeTxt () {
      if (this.verificationCodeStatus === 0) {
        return ''
      } else if (this.verificationCodeStatus === 1) { // 验证码输入框为空
        return this.$t('message.codeNoEmpty')
      } else if (this.verificationCodeStatus === 2) { // 验证码输入框的长度不是6位数
        return this.$t('message.codeFomatError')
      } else if (this.verificationCodeStatus === 3) {
        return ''
      }
    }
  },
  methods: {
//    获取验证码
    getVerificationCode () {
      this.saveBtnStatus = 1
      this.btnVeriStatus = 1
      this.$ajax.getPhoneNum({
        type: 'TPL_SMS_FORGET_MOBILE_VERIFY_CODE'
      }).then((res) => {
        this.changeBtnVeriTime()
        this.focus('verificationCode')
        this.btnVeriStatus = 2
        if (res.code === 200) {
          this.error = false
          this.errorStatus = 1
        } else if (res.code === 301) {
          this.error = true
          this.errorStatus = 2
        } else if (res.code === 305) {
          this.error = true
          this.errorStatus = 3
        } else if (res.code === 307) {
          this.error = true
          this.errorStatus = 4
        } else if (res.code === 311) {
          this.error = true
          this.errorStatus = 5
        } else if (res.code === 202) {
          this.error = true
          this.errorStatus = 9
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    changeBtnVeriTime () {
      clearInterval(this.veriTimer)
      this.veriTimer = setInterval(() => {
        if (this.btnVeriTime <= 0) {
          clearInterval(this.veriTimer)
          this.btnVeriStatus = 0
          this.btnVeriTime = 60
        } else {
          this.btnVeriTime -= 1
        }
      }, 1000)
    },
    nextStep () {
      if (this.step === 1) {
        if (this.saveBtnStatus === 0) return
//        if (this.errorStatus !== 1) return
        this.checkVerificationCode()
      } else if (this.step === 2) {
//        if (this.errorStatus !== 1) return
        if (this.emailStatus !== 1) return
        this.checkEmail()
      }
    },
    prevStep () {
      if (this.step === 2) {
        this.step = 1
      } else if (this.step === 3) {
        this.step = 2
      }
    },
    checkVerificationCode () {
//      if (this.verificationCode === '') {
//        console.log(2)
//        this.focus('verificationCode')
//        this.errorStatus = 2
//        return
//      }
      if (/^\s*$/g.test(this.verificationCode)) {
        this.verificationCodeStatus = 1
        return
      } else if (this.verificationCode.length !== 6) {
        this.verificationCodeStatus = 2
        return
      }
      this.verificationCodeStatus = 3
      this.$ajax.checkVerificationCode({
        sms_code: this.verificationCode
      }).then((res) => {
        if (res.code === 200) {
          this.btnStatus = 0
          this.errorStatus = 1
          this.step = 2
          this.btnIndex = 1
        } else if (res.code === 201) {
          this.$refs.verificationCode.focus()
          this.errorStatus = 8
          this.error = true
        }
      }).catch((err) => {
        console.log(err)
      })
    },
//    第二步骤点击下一步后要执行的函数
    checkEmail () {
//      if (this.errorStatus !== 1) return
      this.$ajax.changeEmail(this.newEmail).then(res => {
        if (res.code === 200) {
//          this.errorStatus = 0
//          this.step = 3
//          this.sendEmail()
          this.delayCloseDialog()
          this.$emit('new-email', this.newEmail)
        } else if (res.code === 202) {
//          console.log('修改失败')
          this.emailStatus = 5
        } else if (res.code === 301) {
          this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        } else if (res.code === 305) {
//          console.log('邮箱地址格式错误')
          this.emailStatus = 3
        } else if (res.code === 307) {
//          console.log('该邮箱和旧的邮箱一致，修改失败')
          this.emailStatus = 2
        } else if (res.code === 309) {
//          console.log('该邮箱已经注册过')
          this.emailStatus = 2
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    closeDialog () {
      this.$emit('close')
    },
    focus (el) {
      this.$refs[el].focus()
    },
    sendEmail () {
      if (this.btnEmailTime !== 60) {
        return
      }
      this.btnEmailStatus = 1
      this.$http.get('/api/checkVerificationCode').then((res) => {
        console.log(res)
        if (res.data.status === 1) {
          this.changeBtnEmailTime()
          this.btnEmailStatus = 2
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    changeBtnEmailTime () {
      clearInterval(this.emailTimer)
      this.emailTimer = setInterval(() => {
        if (this.btnEmailTime <= 0) {
          clearInterval(this.emailTimer)
          this.btnEmailStatus = 0
          this.btnEmailTime = 60
        } else {
          this.btnEmailTime -= 1
        }
      }, 1000)
    },
    delayCloseDialog () {
      this.isChangeEmailSuccess = true
      this.delayTimer = setInterval(() => {
        if (this.delayTime <= 0) {
          clearInterval(this.delayTimer)
          this.closeDialog()
        } else {
          this.delayTime -= 1
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.change-container {
	background-color: #fff;
}

.change-account {
	width: 416px;
	padding: 40px;
}

.change-account-title {
	height: 28px;
	line-height: 28px;
	font-size: 20px;
	color: #333;
	text-align: center;
}

.change-account-label {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #333;
	margin-top: 40px;
}

.change-account-label span {
	color: #ff600a;
}

.change-account-label-middle {
	margin-top: 24px;
}

.change-account-input {
	width: 416px;
	height: 48px;
	margin-top: 12px;
}

.change-account-input input {
	width: 384px;
	height: 46px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	font-size: 14px;
	color: #333;
	padding: 0 15px;
}

.change-account-input-btn {
	height: 48px;
	margin-top: 12px;
}

.change-account-verification-input {
	float: left;
	width: 290px;
	height: 48px;
}

.change-account-verification-input input {
	width: 260px;
	height: 46px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	font-size: 14px;
	color: #333;
	padding: 0 15px;
}

.change-account-btn {
	float: right;
	width: 110px;
	height: 48px;
}

.change-account-btn button {
	width: 110px;
	height: 48px;
	border: 0;
	border-radius: 2px;
	color: #fff;
	background-color: #ff600a;
	cursor: pointer;
}

.change-account-btn button:hover {
	background-color: #ff3c00;
}

.change-account-btn button:active {
	background-color: #e83700;
}

.change-account-btn button:disabled {
	background-color: #ccc;
	cursor: no-drop;
}

.change-account-tip {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #a5a5a5;
	margin-top: 24px;
}

.change-account-error {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #ff600a;
	padding-left: 24px;
	margin-top: 12px;
	background: url(../../../assets/images/icon_errorTips.png) no-repeat left center;
}

.change-account-btn-group {
	margin-top: 40px;
	font-size: 0;
}

.change-account-btn-group .btn-item {
	width: 200px;
	height: 48px;
	border-radius: 2px;
	font-size: 16px;
	cursor: pointer;
}

.change-account-btn-group .btn-confirm {
	border: 0;
	background-color: #ff600a;
	color: #fff;
	margin-right: 16px;
}

.change-account-btn-group .btn-confirm:hover {
	background-color: #ff3c00;
}

.change-account-btn-group .btn-confirm:active {
	background-color: #e83700;
}

.change-account-btn-group .btn-cancle {
	border: 1px solid #d7d7d7;
	background-color: #fff;
	color: #a5a5a5;
}

.change-account-btn-group .btn-send:disabled {
	background-color: #f0f0f0;
	color: #a5a5a5;
	cursor: no-drop;
}

.change-success {
	width: 480px;
	padding: 60px 0;
}

.change-success-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	background: url(../../../assets/images/icon_success.png) no-repeat center;
}

.change-success-title {
	height: 26px;
	line-height: 26px;
	font-size: 24px;
	color: #333;
	text-align: center;
	margin-top: 24px;
}

.change-success-tip {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #747474;
	text-align: center;
	margin-top: 12px;
}
</style>
